<template>
	<el-row>
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="关键字">
					<el-input v-model="filters.key" clearable placeholder="可根据姓名、手机搜索"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="filters.status" clearable placeholder="账号状态">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="searchs" icon="el-icon-search">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-plus" @click="$refs.modify.handleAdd()">添加</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<template>
			<el-table :data="tableData.items" style="width: 100%;margin-bottom: 20px;" row-key="id" v-loading="loading"
				border :height="tableHeight" default-expand-all>
				<el-table-column type="index" width="80" label="序号"></el-table-column>
				<el-table-column prop="fullName" width="100" label="姓名"></el-table-column>
				<el-table-column prop="loginAccount" label="登录账号" width="120"></el-table-column>
				<el-table-column prop="organizeName" label="所属部门" width="120"></el-table-column>
				<el-table-column prop="sex" label="性别" width="80"></el-table-column>
				<el-table-column prop="mobile" label="手机号码" width="180"></el-table-column>
				<el-table-column prop="status" label="状态" width="180">
					<template slot-scope="scope">
						<el-link :underline="false" :type="scope.row.status ? 'primary' : 'warning'">
							{{scope.row.status?'正常':'停用'}}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
				<el-table-column fixed="right" label="操作" width="160">
					<template slot-scope="scope">
						<el-link icon="el-icon-edit" :underline="false" type="primary"
							@click="$refs.modify.handelModify(scope.row)">修改</el-link>
						<el-link icon="el-icon-delete" :underline="false" type="danger" @click="deletes(scope.row)"
							style="margin-left:15px;">删除</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="tableData.currentPage" :page-sizes="[10, 20, 50, 100,200,500,1000]" :page-size="10"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalItems"></el-pagination>
		</template>
		<modify ref="modify" @complete="onComplete"></modify>
	</el-row>
</template>

<script>
	import modify from './modify'
	export default {
		components: {
			modify
		},
		data() {
			return {
				tableHeight: window.innerHeight - 240,
				filters: {
					key: '',
					status: '',
					limit: 10,
					page: 1
				},
				loading: true,
				options: [
					{
						value: 1,
						label: '正常'
					},
					{
						value: 2,
						label: '停用'
					}
				],
				tableData: {}
			}
		},
		mounted() {
			this.init()
			//this.$refs.modify.refreshSelect();
		},
		methods: {
			init: function () {
				this.$api.sys.admin
					.list({ key: this.filters.key, status: this.filters.status ? this.filters.status : 0, limit: this.filters.limit, page: this.filters.page })
					.then(({ statusCode, data, message }) => {
						if (statusCode == 200) {
							this.loading = false
							this.tableData = data
							console.log(data);
						}
						else {
							this.$notify({
								message: message,
								type: 'error'
							})
						}
					})
					.catch(() => {
						this.loading = false
					})
			},
			searchs: function () {
				this.loading = true
				this.init()
			},
			deletes: function (m) {
				var _this = this
				this.$confirm(
					'确认删除选中记录吗',
					'提示',
					{
						type: 'warning'
					}
				).then(() => {
					this.loading = true
					this.$api.sys.admin
						.delete([m.id])
						.then(({ statusCode, data, message }) => {
							if (statusCode == 200) {
								this.$notify({
									message: '删除成功',
									type: 'success'
								})
								this.init()
							} else {
								this.$notify({
									message: message,
									type: 'error'
								})
							}
						})
						.catch(() => {
							this.loading = false
						})
				})
			},
			handleSizeChange(val) {
				this.filters.page = 1
				this.filters.limit = val
				this.init()
			},
			handleCurrentChange(val) {
				this.filters.page = val
				this.init()
			},
			onComplete() {
				this.init()
			}
		}
	}
</script>